<template>
  <div class="wallet-layout w-100vw">
    <div
      class="wallet__header h-50px flex items-center justify-between px-12px"
    >
      <div class="header__left">
        <span class="text-13px text-text-3">{{ $t("title") }}</span>
      </div>
      <div
        class="header__right text-12px m-0 mt-8px gap-12px flex items-center"
      >
        <span>{{ $t("nfts") }}</span>
        <span>{{ $t("rollover") }}</span>
        <svg class="h-15px w-15px fill-text-6">
          <use
            xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_History"
          ></use>
        </svg>
        <svg class="h-15px w-15px fill-text-6" @click="$router.go(-1)">
          <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Close"></use>
        </svg>
      </div>
    </div>
    <div class="wallet__view bg-fog-31">
      <RouterView />
    </div>
    <div
      class="wallet__footer h-66px flex px-13px py-11px justify-between items-center"
    >
      <div class="footer__item text-center">
        <svg class="h-20px w-20px fill-text-6">
          <use
            xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Deposit"
          ></use>
        </svg>
        <p class="text-12px m-0 mt-8px">{{ $t("deposit") }}</p>
      </div>
      <div class="footer__item text-center">
        <svg class="h-20px w-20px fill-text-6">
          <use
            xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_WithDraw"
          ></use>
        </svg>
        <p class="text-12px m-0 mt-8px">{{ $t("Withdraw") }}</p>
      </div>
      <div class="footer__item text-center">
        <svg class="h-20px w-20px fill-text-6">
          <use
            xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_BuyCrypto"
          ></use>
        </svg>
        <p class="text-12px m-0 mt-8px">{{ $t("buy_crypto") }}</p>
      </div>
      <div class="footer__item text-center">
        <svg class="h-20px w-20px fill-text-6">
          <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Swap"></use>
        </svg>
        <p class="text-12px m-0 mt-8px">{{ $t("bc_swap") }}</p>
      </div>
      <div class="footer__item text-center">
        <svg class="h-20px w-20px fill-text-6">
          <use xlink:href="@/assets/symbol-defs.ef6a79c4.svg#icon_Vault"></use>
        </svg>
        <p class="text-12px m-0 mt-8px">{{ $t("vault_pro") }}</p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const $t = key => {
  return t("layout-wallet." + key);
};
</script>

<style lang="less" scoped>
.wallet-layout {
  .wallet__view {
    height: calc(100vh - 116px);
    overflow: auto;
  }
}
</style>
